<template>
<div class='mine'>
  <div class="top">
    <div class="headPortrait">
      <div class="img">
        <img src="https://img0.baidu.com/it/u=1489807627,808259306&fm=26&fmt=auto" alt="">
      </div>
      <div class="information">
        <div class="name">
          木么么么么么么么么么么
        </div>
        <div class="phone">
          139*****12
        </div>
      </div>
    </div>
    <div class="followCollection">
      <div>
        <span>5</span>
        <span>关注</span>
      </div>
      <div>
        <span>10</span>
        <span>收藏</span>
      </div>
    </div>
  </div>
  <div class="bottom">
    <ul>
      <li>
        <i class="iconfont green">&#xe629;</i>
        <span>挂号记录</span>
        <i class="iconfont">&#xe8f1;</i>
      </li>
      <li>
        <i class="iconfont pink">&#xe665;</i>
        <span>报告单</span>
        <i class="iconfont">&#xe8f1;</i>
      </li>
      <li>
        <i class="iconfont blue">&#xe632;</i>
        <span>预约信息</span>
        <i class="iconfont">&#xe8f1;</i>
      </li>
      <li>
        <i class="iconfont zhongshe">&#xe631;</i>
        <span>我的住院</span>
        <i class="iconfont">&#xe8f1;</i>
      </li>
      <li>
        <i class="iconfont green">&#xe63e;</i>
        <span>我的处方</span>
        <i class="iconfont">&#xe8f1;</i>
      </li>
      <li>
        <i class="iconfont purple">&#xe663;</i>
        <span>就诊人管理</span>
        <i class="iconfont">&#xe8f1;</i>
      </li>
      <li>
        <i class="iconfont purple">&#xe611;</i>
        <span>账号设置</span>
        <i class="iconfont">&#xe8f1;</i>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'mine',
  data() {
    return {}
  },
}
</script>

<style lang='less' scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 2965858 */
  src: url('//at.alicdn.com/t/font_2965858_x0n1fxus69c.woff2?t=1637832197373') format('woff2'),
       url('//at.alicdn.com/t/font_2965858_x0n1fxus69c.woff?t=1637832197373') format('woff'),
       url('//at.alicdn.com/t/font_2965858_x0n1fxus69c.ttf?t=1637832197373') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
.mine{
  .top{
    height: 340px;
    padding: 160px 80px 0px;
    background-color: rgba(0, 183, 93, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
      .headPortrait{
        display: flex;
        .img{
          width: 80px;
          height: 80px;
          border-radius: 50%;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .information{
          margin-left: 20px;
          font-size: 14px;
          width: 160px;
          .name{
            width: 100%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
          }
        }
      }
      .followCollection{
        width: 100%;
        height: 140px;
        background-color: white;
        border-radius: 16px 16px 0px 0px;
        display: flex;
        div{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          span:first-child{
            font-size: 20px;
          }
        }
      }
  }
  .bottom{
    background-color: rgba(242, 242, 242, 1);
    padding-top: 24px;
    ul{
      width: 100%;
      height: calc(128px*8);
      display: flex;
      flex-direction: column;
      li{
        flex: 1;
        background-color: white;
        padding-left: 60px;
        align-items: center;
        height: 128px;
        margin-top: 2px;
        display: flex;
        span{
          font-size: 16px;
        }
        i{
          font-size: 20px;
        }
        span{
          flex: 1;
          margin-left: 20px;
        }
        .iconfont:nth-of-type(2){
          margin-right: 25px;
        }
      }
    }
  }
}
.green{
  color: rgb(50, 206, 50);
}
.pink{
  color: rgb(247, 157, 172);
}
.blue{
  color: rgb(128, 213, 216);
}
.zhongshe{
  color: rgb(122, 102, 63);
}
.purple{
  color: purple;
}
</style>
